<template>
  <k-form-modal drawer width="640px" title="推广链接发放" label-width="90px" v-bind="formModalState" v-on="formModalEvent">
    <el-form-item label="选择讲师" prop="agent_id">
      <el-select v-model="state.model.agent_id" placeholder="不限" filterable style="width: 300px" remote :remote-method="getAllLecList">
        <el-option v-for="item in allLecList" :key="item.agent_id" :label="item.name" :value="item.agent_id" />
      </el-select>
    </el-form-item>
    <el-form-item label="会员版本" prop="vip_level">
      <el-radio-group v-model="state.model.vip_level">
        <el-radio v-for="o in optionsAdPromoteLinkVipLevels" :key="o.value" :label="o.value">{{ o.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="兑换时长" prop="product_id">
      <el-select v-model="state.model.product_id" placeholder="不限" style="width: 300px">
        <el-option v-for="item in productOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="渠道选择" prop="channel">
      <el-select v-model="state.model.channel" placeholder="不限" style="width: 300px">
        <el-option v-for="item in channelOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="失效时间" prop="invalid_time">
      <el-date-picker v-model="state.model.invalid_time" type="datetime" value-format="X" placeholder="请选择失效时间" style="width: 300px" />
    </el-form-item>
  </k-form-modal>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useFormModal } from '@crud/index';
import { optionsAdPromoteLinkVipLevels } from '@/config/index';
import { genPromoteLink, getLecList } from '@/api/crm-agency/ad/lecturer';
import { useData } from '../hooks/use-table';
defineOptions({
  name: 'KgjExchangeExtendUrlModal'
});
const emits = defineEmits(['success']);

const { productOptions, channelOptions } = useData();
const { state, formModalState, formModalEvent, ...methods } = useFormModal({
  model: {
    vip_level: 10,
    invalid_time: '',
    agent_id: undefined,
    channel: undefined, // 渠道
    product_id: undefined
  },
  rules: {
    agent_id: [{ required: true, message: '请选择讲师' }],
    product_id: [{ required: true, message: '请选择兑换时长' }],
    vip_level: [{ required: true, message: '请选择会员版本' }],
    channel: [{ required: true, message: '请选择渠道' }],
    invalid_time: [{ required: true, message: '请选择失效时间' }]
  },
  onSubmit: async (model: any, mode = 0) => {
    if (mode === 0) {
      const res = await genPromoteLink(model);
      if (!res.err) {
        ElMessage.success('操作成功');
        emits('success');
      }
      return res;
    }
  }
});

const allLecList: any = ref<any[]>([]);
const getAllLecList = async (keyword?: string) => {
  const res = await getLecList({ params: { limit: 100, page: 1 }, data: { extend_type: 4, keyword: keyword } });
  allLecList.value = (res?.data?.items ?? []).slice(0);
};
onMounted(() => {
  getAllLecList();
});
defineExpose({
  show: methods.show
});
</script>
